<template>
  <div class="main">
    <el-upload v-loading="uploading" ref="upload" class="upload-file" action="" multiple
      :on-remove="params => handleRemove(params)" :http-request="params => handleFile(params)" :file-list="uploadFileList"
      :limit="limit" accept=".mp4, .avi, .mpg, .rmvb">
      <el-button type=" text" :disabled="canInput" class="add-many"><i class="el-icon-plus"></i></el-button>
    </el-upload>
    <div class="onUploadProgress" v-if="onUploadProgressNum">
      <div class="flex" style="height: 30px;width:100%">
        <div class="">上传进度：</div>
        <div class="JT">
          <div :style="{ 'width': onUploadProgressNum, 'background': 'rgb(115, 189, 5)', 'height': '100%' }"></div>
        </div>
        <div>{{ onUploadProgressNum }}</div>
      </div>
      <div style="color: #a3a3a3;">{{ loadSize + '/' + fileSize }}KB</div>
    </div>
  </div>
</template>

<script>
import DocumentApi from "@/api/document"
export default {
  components: {},
  props: {
    canInput: {
      type: Boolean,
      default: false
    },
    imgUrlList: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 1
    },
  },
  data () {
    return {
      uploadFileList: [],
      uploading: false,
      onUploadProgressNum: 0,
      fileSize: 0,
      loadSize: 0
    };
  },
  watch: {
    onUploadProgressNum (val) {
      if (val) {
        let num = Number(val.replace("%", ""))
        if (num == 100) {
          setTimeout(() => {
            this.onUploadProgressNum = 0
            this.$message.success('上传成功！')
          }, 500)
        }
      }
    }
  },
  mounted () {
    this.uploadFileList = this.imgUrlList ? [{ name: this.imgUrlList, url: this.imgUrlList }] : []
  },
  methods: {
    handleRemove (file) {
      var index = this.uploadFileList.findIndex(a => a.name === file.name)
      if (index !== -1) {
        this.uploadFileList.splice(index, 1);
      }
      this.getFiles()
    },
    // 上传文件
    handleFile (files) {
      let that = this
      this.uploadFileList = []
      let { file } = files
      //1G以内
      if (file.size <= 536870912) {
        let dataForm = new FormData()
        dataForm.append('file', file)
        dataForm.append('moduleType', 'SCIENCE_VEDIO')
        this.uploading = true
        let config = {
          //获取上传进度
          onUploadProgress: function (progressEvent) {
            that.onUploadProgressNum = (Number((progressEvent.loaded / progressEvent.total)) * 100).toFixed(2) + '%'
            that.fileSize = progressEvent.total
            that.loadSize = progressEvent.loaded
            console.log('进度', that.onUploadProgressNum)
          }
        }
        DocumentApi.getUploadUrl(dataForm, config).then(res => {
          this.uploading = false
          let filePath = res.data
          let url = 'http://fishery.ssagroup.cn:9091' + filePath
          this.uploadFileList.push({ url, name: url })
          this.getFiles()
        }).catch(() => {
          this.uploading = false
          this.$message.error('视频上传失败！')
        })
      } else {
        this.$message.error('上传视频过大，请上传512MB以内的视频！当前视频请压缩后上传！')
      }
    },
    getFiles () {
      this.$emit('getFiles', this.uploadFileList)
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
}

.add-many {
  border: 1px solid #6ecae3;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  line-height: 40px;
  border-radius: 4px;
  color: rgb(161, 154, 154);
  font-weight: 600;

  i {
    font-size: 40px;
  }
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.onUploadProgress {
  width: 360px;
  padding: 0 10px;
  line-height: 20px;
  background: #f1f1f1;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%);
  z-index: 9999;
  font-size: 12px;
  color: rgb(115, 189, 5);

  .JT {
    width: 180px;
    background: #cecece;
    height: 10px;
    margin: 0 10px;
  }
}
</style>
